<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form :inline="true" size="normal">
            <el-form-item>
                <el-input v-model="searchObj.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchhandler">查询</el-button>
                <el-button @click="clear">清空</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" size="default">添加</el-button>

        <el-table :data="roleList.items" border stripe style="width: 960px;margin-top:20px">
            <el-table-column width="50" type="selection"> </el-table-column>
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot="{ row, $index }">
                    <el-button type="info" size="small" icon="el-icon-info"></el-button>
                    <el-button type="primary" size="small" icon="el-icon-edit"></el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination @size-change="handlersize" @current-change="getroleList" style="margin-top:20px"
            :current-page.sync="page" :page-sizes="[3, 5, 7]" :page-size="limit"
            layout=" prev, pager, next, jumper,->, sizes,total" :total="roleList.total" :pager-count="7">
        </el-pagination>
    </el-card>

</template>

<script>
import { nextTick } from 'process'

export default {
    data() {
        return {
            page: 1,
            limit: 3,
            searchObj: {
                roleName: '',
                name:''
            },
           
            roleList: {}
        }
    },
    mounted() {
        this.getroleList()
    },
    methods: {
        async getroleList(page = 1) {
            this.page = page
            const result = await this.$API.role.getPageList(page, this.limit, {roleName: this.searchObj.roleName})
            console.log(result);
            this.roleList = result.data
        },
        handlersize(page) {
            this.limit = page
            this.getroleList()
        },
        searchhandler(){
           this.searchObj.roleName=this.searchObj.name
           this.getroleList()
    },
    // 清空
    clear(){
        this.searchObj={
            roleName:'',
            name:''
        }
        this.getroleList()
    }
}
}
</script>

<style lang="sass" scoped>

</style>